<!--
Date: 2025-08-13
Copyright (c) 2025 Industrial Software Feature Database
-->
<template>
    <el-card class="data_detail">
      <el-form size="small" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="模板名称：">
              <el-select v-model="templateId" @change="getTemplateData">
                <el-option v-for="item in templateList" :key="item.id" :label="item.templateName" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="业务场景：">
              <span>{{ formData.businessScenario }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="业务系统：">
              <span>{{ formData.businessSystem }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="要素库类型：">
              <span>{{ formData.databaseType }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="formData.databaseSubtype">
            <el-form-item label="要素库子类型：">
              <span>{{ formData.databaseSubtype }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="数据模型：">
              <span>{{ formData.modelName }}</span>
            </el-form-item>
          </el-col>
          
          <el-col :span="24">
            <el-form-item label="模板描述：">
              <div v-html="formData.templateDescription"></div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="table_data">
        <h3>数据模板字段：</h3>
        <el-table size="small" ref="tableRef" :data="tableList" row-key="modelingConfigFieldId">
          <!-- <el-table-column type="selection" width="55" /> -->
          <el-table-column prop="fieldName" label="字段名"></el-table-column>
          <el-table-column prop="fieldDescription" label="字段中文名"></el-table-column>
          <el-table-column prop="fieldType" label="字段类型"></el-table-column>
          <el-table-column prop="fieldLength" label="长度"></el-table-column>
          <!-- <el-table-column prop="" label="小数位数"></el-table-column> -->
        </el-table>
      </div>
    </el-card>
</template>
<script name="TemplateDetail" setup>
import { getDatabaseTemplateList, getDatabaseTemplateDetail } from '@/api/system/template/index';
import { ref } from 'vue';

const props = defineProps(['templateList']);
const emit = defineEmits(['handleEvent']);
//tableList
const templateList = ref([]);
const tableList = ref([]);
const templateId = ref('');
const formData = ref({
  businessScenario: '',
  businessSystem: '',
  databaseType: '',
  databaseSubtype: '',
  modelName: '',
  tableName: '',
  tableDescription: '',
  templateName: '',
  templateDescription: '',
  configId: ''
})
// 取消
const cancel = () => {
  emit('handleEvent', {type: 'cancel'});
};
const getTemplateData = (val) => {
  if (val) {
    getSingleTemplateData(val);
  }
}
// 单个模板数据查询
const getSingleTemplateData = (id) => {
  getDatabaseTemplateDetail(id).then((res) => {
    formData.value = res.data.databaseModelingConfig;
    formData.value.templateName = res.data.templateName;
    formData.value.templateDescription = res.data.templateDescription;
    tableList.value = res.data?.databaseModelingTemplateConfigList;
  })
}
// 模板列表查询
const getTemplateList = () => {
  getDatabaseTemplateList({pageNum: 1, pageSize: 9999}).then((res) => {
    templateList.value = res.data;
  })
}
onMounted(async () => {
  getTemplateList();
});
defineExpose({
  templateId,
  formData,
});
</script>
<style lang="scss" scoped>
.data_detail {
  font-size: 12px;
  .basic {
    .title {
      background: #fafafa;
      height: 20px;
      line-height: 20px;
      font-weight: 600;
    }
    .basic_item {
      margin-top: 10px;
      > span:nth-child(2) {
        color: #909399;
      }
    }
    .split {
      width: 100%;
      height: 1px;
      background: #f4f4f4;
      margin-top: 10px;
    }
    .rows {
      margin-top: 10px;
      display: flex;
      justify-content: space-between;
      .row_item {
        width: 33%;
        > span:nth-child(2) {
          color: #909399;
        }
      }
    }
  }
  .data_view {
    margin-top: 20px;
    .title {
      background: #fafafa;
      height: 20px;
      line-height: 20px;
      font-weight: 600;
      display: flex;
      align-items: center;
      .view {
        margin-left: 10px;
        cursor: pointer;
      }
    }
  }
  .table_data {
    margin-top: 20px;
    .pagenation {
      display: flex;
      justify-content: end;
      margin-top: 10px;
    }
  }
}
</style>
